<template>
  <el-dialog v-model="visible" :title="show ? '修改年费' : '配置年费'" :close-on-click-modal="false" width="500">
    <el-form ref="dataFormRef" :model="dataForm" label-width="120px" @keyup.enter="submitHandle()">
      <el-form-item label="平台年费（年）" prop="amount">
        <el-input
            v-model="dataForm.amount"
            style="max-width:300px"
            placeholder="平台年费"
        ><template #append>元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="卡年费（年）" prop="simAmount">
        <el-input
            v-model="dataForm.simAmount"
            style="max-width:300px"
            placeholder="卡年费"
        ><template #append>元</template>
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submitHandle()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
import { useSubmitApi } from '@/api/gps/annualFee'
const emit = defineEmits(['refreshDataList'])
const visible = ref(false)
const dataFormRef = ref()
const show = ref(false)
const dataForm = ref<any>({
  orgId: '',
  amount: undefined,
  simAmount: undefined
})

const init = (data) => {
  dataForm.value = {}
  visible.value = true
  show.value = false
  const { amount, id } = data
  if (amount) {
    show.value = true
  }
  dataForm.value.orgId = id
  dataForm.value.amount = amount
}

// 表单提交
const submitHandle = () => {
  useSubmitApi(dataForm.value).then(() => {
    ElMessage.success({
      message: '操作成功',
      duration: 500,
      onClose: () => {
        visible.value = false
        emit('refreshDataList')
      }
    })
  })
}

defineExpose({
  init
})
</script>
